<template>
  <div class="mt10">
    <van-form @submit="onSubmit" @failed="onFail" ref="form">
      <van-field
        v-model="form.phone"
        name="phone"
        label="手机号码"
        clearable
        placeholder="请输入手机号码"
        :rules="[
          { required: true, message: '请填写手机号码' },
          {
            pattern: reg.phone,
            message: '请输入正确的手机号',
          },
        ]"
      />
      <van-field
        v-model="form.captcha"
        center
        clearable
        name="captcha"
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="[
          { required: true, message: '请填写验证码' },
          {
            pattern: reg.code,
            message: '4位验证码',
          },
        ]"
      >
        <template #button>
          <van-button
            v-if="flag"
            :disabled="!disabled"
            size="small"
            native-type="button"
            type="primary"
            @click.stop="startSendSms"
            >发送验证码</van-button
          >
          <van-button v-else disabled size="small" native-type="button"
            >剩余{{ count }}S</van-button
          >
        </template>
      </van-field>
      <div class="links">
        <p class="left">
          <router-link to="/register">没有账号,去注册?</router-link>
        </p>
        <p class="right">
          <router-link to="/forgetpass">找回密码?</router-link>
        </p>
      </div>
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>




<script>
var timer = null;
export default {
  data() {
    return {
      form: {},
      flag: true,
      count: 120,
    };
  },
  computed: {
    disabled() {
      return this.reg.phone.test(this.form.phone);
    },
  },
  methods: {
    timeDown() {
      this.count--;
      this.flag = false;
      timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
          this.flag = false;
        } else {
          clearInterval(timer);
          timer = null;
          this.flag = true;
          this.count = 120;
        }
      }, 1000);
    },
    sendSms() {
      this.$ajax
        .findUser({
          phone: this.form.phone,
        })
        .then((res) => {
          if (res.length > 0) {
            this.$ajax
              .getCaptcha({
                phone: this.form.phone,
              })
              .then((res) => {
                if (res.code == 200) {
                  this.$toast("验证码发送成功");
                } else {
                  this.$toast("验证码发送失败");
                }
              });
          } else {
            this.$toast("当前手机号未被注册");
          }
        });
    },
    startSendSms() {
      console.log("发送验证码");
      this.timeDown();
      this.sendSms();
    },
    onSubmit() {
      console.log(11);
      this.$ajax
        .findUser({
          phone: this.form.phone,
        })
        .then((result) => {
          if (result.length > 0) {
            this.$ajax.checkCaptcha(this.form).then((res) => {
              if (res.code == 200) {
                this.changeUserInfo(result[0]);
                localStorage.setItem("phone", this.form.phone);
                this.$router.push({
                  name: "mine",
                });
              } else {
                this.$toast(res.message || "验证码错误");
              }
            });
          } else {
            this.$toast("当前手机号未被注册,不能校验");
          }
        });
    },
    onFail() {
      this.showErrMsg("校验失败");
    },
  },
  mounted() {
    if (this.$route.query.phone) {
      this.form = { ...this.form, phone: this.$route.query.phone };
    } else {
      this.form = { ...this.form, phone: localStorage.getItem("phone") };
    }
  },
  destroyed() {
    clearInterval(timer);
    timer = null;
  },
};
</script>

<style lang="scss" scoped>
.links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  .left a {
    color: #f50;
  }
  .right a {
    color: #123456;
  }
}
</style>